<template>
    <div>
        <p class="page-title">我的推广方式</p>
        <div class="container">
            <div class="type">
                <div class="qrcode">
                    <p>专属二维码</p>
                    <div>
                        <el-image :src="erweima_url">
                            <div slot="placeholder" class="placeholder">
                                <i class="el-icon-loading"></i>
                            </div>
                        </el-image>
                    </div>
                    <el-button type="primary" @click="download" size="mini">下载推广二维码</el-button>
                </div>
                <div class="link">
                    <p>专属推广链接</p>
                    <el-input class="link-input" :value="yaoqing_lianjie">
                        <template slot="append">
                            <el-button @click="$util.copy()"
                                       class="tag-read"
                                       :data-clipboard-text="yaoqing_lianjie">复制推广链接
                            </el-button>
                        </template>
                    </el-input>

                </div>
            </div>
            <div class="counter">
                <div class="item">
                    <div>邀请人数</div>
                    <div><span class="num">{{yaoqing_renshu}}</span> <sub>人</sub></div>
                </div>
                <div class="border">&nbsp;</div>
                <div class="item">
                    <div>佣金金额</div>
                    <div><span class="num">{{fanjin_jine.toFixed(2)}}</span> <sub>元</sub></div>
                </div>
            </div>

            <el-tabs v-model="activeName">
                <el-tab-pane label="佣金信息" name="first">
                    <el-table
                            :data="fanli_jilu_data"
                            style="width: 100%">
                        <el-table-column
                                prop="fanli_goumaizhe"
                                label="邀请人ID"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="create_time"
                                label="返利时间"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="biandong_jine"
                                label="销售金额(元)">
                        </el-table-column>
                    </el-table>
                    <pagination :total="fanli_jilu_total" v-if="fanli_jilu_total" :options="fanliForm"
                                @change="fanli"></pagination>
                </el-tab-pane>
                <el-tab-pane label="推广列表" name="second">
                    <el-table
                            :data="yaoqing_renyuan_data"
                            style="width: 100%">
                        <el-table-column
                                prop="ID"
                                label="邀请人ID"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="create_time"
                                label="返利时间"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="xiaoshou_jine"
                                label="返佣金额(元)">
                        </el-table-column>
                    </el-table>
                    <pagination :total="yaoqing_renyuan_total" v-if="yaoqing_renyuan_total" :options="yaoqingForm"
                                @change="yaoqing"></pagination>
                </el-tab-pane>
            </el-tabs>

            <div class="sub-title m-t-lg">活动F&Q</div>
            <div class="fq-list">
                <div class="item" v-for="(qa,index) in shuoming_data" :key="index">
                    <p class="f">{{index+1}},{{qa[0]}}</p>

                    <p class="q" v-html="qa[1]"></p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: 'promotion',
        components: {},
        data() {
            return {
                link: 'https://translate.google.com/',
                activeName: "first",
                shuoming_data: '',
                yaoqing_lianjie: '',
                yaoqing_renshu: '',
                erweima_url: '',
                fanjin_jine: 0,
                tableData: [],

                fanli_jilu_data: [],
                fanliForm: {
                    page: 1
                },
                fanli_jilu_total: 0,

                yaoqing_renyuan_data: [],
                yaoqingForm: {
                    page: 1
                },
                yaoqing_renyuan_total: 0

            }
        },
        computed: {},
        methods: {
            getDetail() {
                return new Promise(resolve => {
                    this.$axios.post('/api/user/tuiguang_fanli')
                        .then(res => {
                            if (res.code === `200`) {

                                ({
                                    shuoming_data: this.shuoming_data,
                                    yaoqing_lianjie: this.yaoqing_lianjie,
                                    erweima_url: this.erweima_url,
                                    yaoqing_renshu: this.yaoqing_renshu,
                                    fanjin_jine: this.fanjin_jine,
                                    // yaoqing_renyuan_data: this.yaoqing_renyuan_data,
                                    // fanli_jilu_data: this.fanli_jilu_data
                                } = res.data);
                            }
                            resolve()
                        })
                })

            },
            /**
             * 下载二维码
             */
            download() {
                let a = document.createElement('a');
                a.setAttribute('href', this.erweima_url);
                a.setAttribute('download', '推广二维码');
                a.click()
            },
            /**
             * 获取邀请人员信息
             */
            yaoqing() {
                return new Promise(resolve => {
                    this.$axios.post(`/api/user/yaoqing_renyuan`, this.yaoqingForm)
                        .then(res => {
                            if (res.code === `200`) {
                                this.yaoqing_renyuan_data = res.data.yaoqing_renyuan_data;
                                this.yaoqing_renyuan_total = res.data.shuliang
                            }
                            resolve()
                        })
                })
            },
            /**
             * 获取返利记录
             */
            fanli() {
                this.$axios.post(`/api/user/fanli_jilu`, this.fanliForm)
                    .then(res => {
                        if (res.code === `200`) {
                            this.fanli_jilu_data = res.data.fanli_jilu_data;
                            this.fanli_jilu_total = res.data.shuliang
                        }
                    })
            }
        },
        async created() {
            await this.getDetail();
            await this.yaoqing();
            this.fanli();
        },
    }
</script>

<style lang="less" scoped>
    @import '~@/assets/css/varibles.less';

    .container {

        .type {
            display: flex;
            margin: 50px 0;
            align-items: center;

            .qrcode {
                text-align: center;

                p {
                    margin-bottom: 15px;
                }

                margin-right: 50px;

                /deep/ .el-image {
                    width: 100%;
                    height: 100%;

                    img {
                        width: 150px;
                    }
                }

            }

            .link {
                p {
                    margin-bottom: 15px;
                }

                /deep/ .el-input {
                    input {
                        width: 500px;
                    }

                }


            }
        }

        .counter {
            display: flex;
            justify-content: space-between;
            margin: 20px 0;
            width: @main-width;

            .item {
                font-size: 16px;
                text-align: center;
                flex: 2;

                & > div {
                    margin-bottom: 10px;
                }

                .num {
                    font-size: 30px;
                    font-weight: bold;

                }

                sub {
                    display: inline-block;
                    margin-left: 5px;
                    font-size: 12px;
                    color: #363636;
                }
            }

            .border {
                width: 2px;
                background: #EEEEEE;
            }
        }

        .fq-list {
            .item {
                padding: 10px;

                &:not(:last-child) {
                    border-bottom: 1px solid #eee;
                }

                .f {
                    font-size: 16px;
                    font-weight: bold;
                }

                .q {
                    text-indent: 20px;
                    margin-top: 10px;
                }
            }
        }
    }

</style>
